<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>

<script type="text/babel">
    /*
    * 关于虚拟DOM：
    *   本质是Object类型的对象（一般对象）
    *   虚拟DOM比较'轻',真实DOM比较'重'，因为虚拟DOM是React内部在使用，不需要真实DOM上那么的属性
    *   虚拟DOM最终会被React转换为真实DOM渲染在页面上
    * */
    const vdom = <h1>hello-jsx</h1>
    const tdom = document.querySelector("#root")
    console.log('虚拟DOM', vdom)
    console.log('真实DOM', tdom)
    ReactDOM.render(vdom, document.querySelector("#root"))
</script>
</body>
</html>